
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe60b;</i>
                    <div class="name">商家服务</div>
                    <div class="code">&amp;#xe60b;</div>
                    <div class="fontclass">.shangjiafuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe620;</i>
                    <div class="name">洗车</div>
                    <div class="code">&amp;#xe620;</div>
                    <div class="fontclass">.xiche</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe610;</i>
                    <div class="name">洗车</div>
                    <div class="code">&amp;#xe610;</div>
                    <div class="fontclass">.iconfontxiche</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60d;</i>
                    <div class="name">统计</div>
                    <div class="code">&amp;#xe60d;</div>
                    <div class="fontclass">.tongji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe605;</i>
                    <div class="name">统计</div>
                    <div class="code">&amp;#xe605;</div>
                    <div class="fontclass">.iconfontshujutongji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e;</i>
                    <div class="name">0a统计</div>
                    <div class="code">&amp;#xe60e;</div>
                    <div class="fontclass">.tongji1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6af;</i>
                    <div class="name">统计</div>
                    <div class="code">&amp;#xe6af;</div>
                    <div class="fontclass">.tongji2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62c;</i>
                    <div class="name">数据统计</div>
                    <div class="code">&amp;#xe62c;</div>
                    <div class="fontclass">.shujutongji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe765;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xe765;</div>
                    <div class="fontclass">.xinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60f;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xe60f;</div>
                    <div class="fontclass">.110</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62f;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xe62f;</div>
                    <div class="fontclass">.xinxi1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61d;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xe61d;</div>
                    <div class="fontclass">.xinxi2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3461;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#x3461;</div>
                    <div class="fontclass">.xinxi3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe631;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xe631;</div>
                    <div class="fontclass">.xinxi4</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61b;</i>
                    <div class="name">查看</div>
                    <div class="code">&amp;#xe61b;</div>
                    <div class="fontclass">.chakan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe618;</i>
                    <div class="name">查看</div>
                    <div class="code">&amp;#xe618;</div>
                    <div class="fontclass">.chakan1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0037;</i>
                    <div class="name">查看</div>
                    <div class="code">&amp;#xf0037;</div>
                    <div class="fontclass">.chakan2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe651;</i>
                    <div class="name">查看</div>
                    <div class="code">&amp;#xe651;</div>
                    <div class="fontclass">.chakan3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe610;</i>
                    <div class="name">查看</div>
                    <div class="code">&amp;#xe610;</div>
                    <div class="fontclass">.chakan4</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe622;</i>
                    <div class="name">查看</div>
                    <div class="code">&amp;#xe622;</div>
                    <div class="fontclass">.chakan5</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62d;</i>
                    <div class="name">查看</div>
                    <div class="code">&amp;#xe62d;</div>
                    <div class="fontclass">.chakan6</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00fe;</i>
                    <div class="name">查看通知</div>
                    <div class="code">&amp;#xf00fe;</div>
                    <div class="fontclass">.chakantongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe74c;</i>
                    <div class="name">查看地图</div>
                    <div class="code">&amp;#xe74c;</div>
                    <div class="fontclass">.chakanditu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe616;</i>
                    <div class="name">更新</div>
                    <div class="code">&amp;#xe616;</div>
                    <div class="fontclass">.gengxin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e9;</i>
                    <div class="name">更新</div>
                    <div class="code">&amp;#xe6e9;</div>
                    <div class="fontclass">.gengxin1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe751;</i>
                    <div class="name">更新</div>
                    <div class="code">&amp;#xe751;</div>
                    <div class="fontclass">.gengxin2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe633;</i>
                    <div class="name">版本更新</div>
                    <div class="code">&amp;#xe633;</div>
                    <div class="fontclass">.banbengengxin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60b;</i>
                    <div class="name">版本更新</div>
                    <div class="code">&amp;#xe60b;</div>
                    <div class="fontclass">.gengxin3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe612;</i>
                    <div class="name">版本更新</div>
                    <div class="code">&amp;#xe612;</div>
                    <div class="fontclass">.banbengengxin1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe652;</i>
                    <div class="name">更新</div>
                    <div class="code">&amp;#xe652;</div>
                    <div class="fontclass">.gengxin4</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf007c;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xf007c;</div>
                    <div class="fontclass">.yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67a;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xe67a;</div>
                    <div class="fontclass">.yonghu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe611;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xe611;</div>
                    <div class="fontclass">.yonghu2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00b6;</i>
                    <div class="name">用户</div>
                    <div class="code">&amp;#xf00b6;</div>
                    <div class="fontclass">.10</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe636;</i>
                    <div class="name">退款</div>
                    <div class="code">&amp;#xe636;</div>
                    <div class="fontclass">.tuikuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6be;</i>
                    <div class="name">退款</div>
                    <div class="code">&amp;#xe6be;</div>
                    <div class="fontclass">.tuikuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe646;</i>
                    <div class="name">退款</div>
                    <div class="code">&amp;#xe646;</div>
                    <div class="fontclass">.refund</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013b;</i>
                    <div class="name">退款</div>
                    <div class="code">&amp;#xf013b;</div>
                    <div class="fontclass">.tuikuan2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6db;</i>
                    <div class="name">完成</div>
                    <div class="code">&amp;#xe6db;</div>
                    <div class="fontclass">.wancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe79c;</i>
                    <div class="name">完成</div>
                    <div class="code">&amp;#xe79c;</div>
                    <div class="fontclass">.wancheng1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe92c;</i>
                    <div class="name">完成</div>
                    <div class="code">&amp;#xe92c;</div>
                    <div class="fontclass">.wancheng2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61b;</i>
                    <div class="name">已付款</div>
                    <div class="code">&amp;#xe61b;</div>
                    <div class="fontclass">.yifukuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe616;</i>
                    <div class="name">待支付@2x</div>
                    <div class="code">&amp;#xe616;</div>
                    <div class="fontclass">.daizhifu2x</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe609;</i>
                    <div class="name">待收款</div>
                    <div class="code">&amp;#xe609;</div>
                    <div class="fontclass">.daifukuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe602;</i>
                    <div class="name">待支付</div>
                    <div class="code">&amp;#xe602;</div>
                    <div class="fontclass">.daizhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0001;</i>
                    <div class="name">待支付</div>
                    <div class="code">&amp;#xf0001;</div>
                    <div class="fontclass">.daizhifu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe71a;</i>
                    <div class="name">取消</div>
                    <div class="code">&amp;#xe71a;</div>
                    <div class="fontclass">.quxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6d1;</i>
                    <div class="name">取消</div>
                    <div class="code">&amp;#xe6d1;</div>
                    <div class="fontclass">.quxiao1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe640;</i>
                    <div class="name">取消</div>
                    <div class="code">&amp;#xe640;</div>
                    <div class="fontclass">.icon56</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">退款</div>
                    <div class="code">&amp;#xe608;</div>
                    <div class="fontclass">.tuikuan3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe629;</i>
                    <div class="name">积分</div>
                    <div class="code">&amp;#xe629;</div>
                    <div class="fontclass">.jifen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60d;</i>
                    <div class="name">积分</div>
                    <div class="code">&amp;#xe60d;</div>
                    <div class="fontclass">.jifen1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe601;</i>
                    <div class="name">积分</div>
                    <div class="code">&amp;#xe601;</div>
                    <div class="fontclass">.jifen2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0008;</i>
                    <div class="name">积分</div>
                    <div class="code">&amp;#xf0008;</div>
                    <div class="fontclass">.jifen3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64c;</i>
                    <div class="name">积分</div>
                    <div class="code">&amp;#xe64c;</div>
                    <div class="fontclass">.point</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe611;</i>
                    <div class="name">积分商城</div>
                    <div class="code">&amp;#xe611;</div>
                    <div class="fontclass">.jifenshangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe80f;</i>
                    <div class="name">188-积分</div>
                    <div class="code">&amp;#xe80f;</div>
                    <div class="fontclass">.188jifen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe613;</i>
                    <div class="name">积分商城</div>
                    <div class="code">&amp;#xe613;</div>
                    <div class="fontclass">.jifenshangcheng1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe628;</i>
                    <div class="name">现有积分</div>
                    <div class="code">&amp;#xe628;</div>
                    <div class="fontclass">.unie65e</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e4;</i>
                    <div class="name">我的积分</div>
                    <div class="code">&amp;#xe6e4;</div>
                    <div class="fontclass">.wodejifen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60b;</i>
                    <div class="name">广告</div>
                    <div class="code">&amp;#xe60b;</div>
                    <div class="fontclass">.guanggao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe664;</i>
                    <div class="name">广告</div>
                    <div class="code">&amp;#xe664;</div>
                    <div class="fontclass">.guanggao1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7be;</i>
                    <div class="name">广告</div>
                    <div class="code">&amp;#xe7be;</div>
                    <div class="fontclass">.jinlingyingcaiicon09</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66e;</i>
                    <div class="name">广告管理</div>
                    <div class="code">&amp;#xe66e;</div>
                    <div class="fontclass">.unie677</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe681;</i>
                    <div class="name">广告列表</div>
                    <div class="code">&amp;#xe681;</div>
                    <div class="fontclass">.guanggaoliebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b4;</i>
                    <div class="name">参数</div>
                    <div class="code">&amp;#xe6b4;</div>
                    <div class="fontclass">.fangbianxiangxi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf00a9;</i>
                    <div class="name">产品参数</div>
                    <div class="code">&amp;#xf00a9;</div>
                    <div class="fontclass">.chanpincanshu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">系统</div>
                    <div class="code">&amp;#xe607;</div>
                    <div class="fontclass">.xitong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e;</i>
                    <div class="name">系统</div>
                    <div class="code">&amp;#xe60e;</div>
                    <div class="fontclass">.xitong1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62a;</i>
                    <div class="name">系统设置</div>
                    <div class="code">&amp;#xe62a;</div>
                    <div class="fontclass">.xitongshezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe642;</i>
                    <div class="name">系统管理</div>
                    <div class="code">&amp;#xe642;</div>
                    <div class="fontclass">.xitongguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf010e;</i>
                    <div class="name">系统管理</div>
                    <div class="code">&amp;#xf010e;</div>
                    <div class="fontclass">.xitongguanli1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60c;</i>
                    <div class="name">首页_首页</div>
                    <div class="code">&amp;#xe60c;</div>
                    <div class="fontclass">.shouyeshouye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xe607;</div>
                    <div class="fontclass">.shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6d9;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xe6d9;</div>
                    <div class="fontclass">.shouye1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf007c;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xf007c;</div>
                    <div class="fontclass">.fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3442;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#x3442;</div>
                    <div class="fontclass">.fanhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0292;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xf0292;</div>
                    <div class="fontclass">.fanhui2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0010;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xf0010;</div>
                    <div class="fontclass">.shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe636;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xe636;</div>
                    <div class="fontclass">.shanchu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe638;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xe638;</div>
                    <div class="fontclass">.delete</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf000a;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xf000a;</div>
                    <div class="fontclass">.shanchu2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe616;</i>
                    <div class="name">修改</div>
                    <div class="code">&amp;#xe616;</div>
                    <div class="fontclass">.xiugai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe630;</i>
                    <div class="name">修改</div>
                    <div class="code">&amp;#xe630;</div>
                    <div class="fontclass">.xiugai1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe615;</i>
                    <div class="name">修改</div>
                    <div class="code">&amp;#xe615;</div>
                    <div class="fontclass">.xiugai2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe687;</i>
                    <div class="name">详情</div>
                    <div class="code">&amp;#xe687;</div>
                    <div class="fontclass">.xiangqing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe618;</i>
                    <div class="name">详情</div>
                    <div class="code">&amp;#xe618;</div>
                    <div class="fontclass">.xiangqing1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62b;</i>
                    <div class="name">详情</div>
                    <div class="code">&amp;#xe62b;</div>
                    <div class="fontclass">.xiangqing2</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
